<template>
  <div>
    <div class="user_top">
      <div class="user_top_1">
        <img
          :src="avatar"
          alt=""
          style="height: 70px; width: 70px; border-radius: 50%"
        />
        <span class="user_top_2" @click="Login">{{ nickname }}</span>
      </div>
      <div>
        <van-icon name="arrow" v-show="icon" />
        <van-icon name="cross" v-show="!icon" @click="logoutFn()" />
      </div>
    </div>

    <van-grid :column-num="3" square>
      <van-grid-item
        v-for="value in loginList"
        :key="value.id"
        :icon="value.icon"
        :text="value.txt"
      />
    </van-grid>
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper">
        <div class="block" @click.stop>
          <van-cell-group>
            <van-field
              v-model="username"
              required
              label="用户名"
              placeholder="请输入用户名"
            />
            <van-field
              v-model="password"
              required
              label="密码"
              placeholder="请输入密码"
            />
          </van-cell-group>

          <van-button type="danger" round block class="field" @click="onLonin()"
            >登录</van-button
          >
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { Toast } from 'vant';
import { GetAuthList } from "../request/api";
import { Dialog } from "vant";
export default {
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  data() {
    return {
      show: false,
      //用户名
      username: "",
      //密码
      password: "",
      nickname: "点击登录",
      avatar:
        "",
      icon: true,
      loginList: [
        { icon: "label-o", txt: "我的订单" },
        { icon: "coupon-o", txt: "优惠券" },
        { icon: "gift-o", txt: "礼品卡" },
        { icon: "location-o", txt: "我的收藏" },
        { icon: "flag-o", txt: "我的足迹" },
        { icon: "contact", txt: "会员福利" },
        { icon: "aim", txt: "地址管理" },
        { icon: "warn-o", txt: "账号安全" },
        { icon: "service-o", txt: "联系客服" },
        { icon: "question-o", txt: "帮助中心" },
        { icon: "smile-comment-o", txt: "意见反馈" },
      ],
    };
  },
  created() {
    let token = localStorage.getItem("token");
    if (token) {
      this.nickname = localStorage.getItem("nickname");
      this.avatar = localStorage.getItem("avatar");
      this.icon = false;
    }
  },
  methods: {
    async onLonin() {
      await GetAuthList({
        username: this.username,
        pwd: this.password,
      }).then((res) => {
        // console.log(res.data);
        if (!res.errno === 0) return;
        Toast.success('登录成功');
        localStorage.setItem("token", res.data.token);
        localStorage.setItem("avatar", res.data.userInfo.avatar);
        localStorage.setItem("nickname", res.data.userInfo.nickname);
        this.nickname = res.data.userInfo.nickname;
        this.avatar = res.data.userInfo.avatar;
        this.icon = false;
        this.show = false;
        this.username = "";
        this.password = "";
      });
    },
    logoutFn() {
      Dialog.confirm({
        title: "登录账号确认",
        message: "你是否想要退出登录?",
      })
        .then(() => {
          Toast.success('成功退出');
          localStorage.removeItem("token");
          localStorage.removeItem("nickname");
          localStorage.removeItem("avatar");
          this.icon = true;
          this.nickname = "点击登录";
          this.avatar =
            "";
        })
        .catch(() => {
          // on cancel
        });
    },
    Login() {
      let token = localStorage.getItem("token");
      if (!token) {
        this.show = true;
      }
    },
  },
};
</script>
 
<style lang = "less" scoped>
/* pages/user/user.wxss */
.field {
  width: 90%;
  margin: 20px 15px;
}
.van-cell {
  margin: 20px 0;
}
.modelLogin {
  width: 80%;
  height: 240px;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 90%;
  height: 220px;
  background-color: #fff;
}
.user_top {
  height: 70px;
  padding: 20px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #333333;
  color: #fff;
}
.user_top_1 {
  display: flex;
  align-items: center;
}
.user_top_2 {
  margin-left: 5px;
}
.login_1 {
  margin-top: 15px;
}
</style>